<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor)">
    <div class="section">
		<div style="display: flex; align-items: center;">
			<ui5-label>Selection Behavior: </ui5-label>
			<span id="selectionBehavior" role="radiogroup">
				<ui5-radio-button name="selectionBehavior" text="RowSelector" checked></ui5-radio-button>
				<ui5-radio-button name="selectionBehavior" text="RowOnly"></ui5-radio-button>
			</span>
			<div style="flex-grow: 1;"></div>
			<ui5-label>Header Selector: </ui5-label>
			<span id="headerSelector" role="radiogroup">
				<ui5-radio-button name="headerSelector" text="SelectAll" checked></ui5-radio-button>
				<ui5-radio-button name="headerSelector" text="ClearAll"></ui5-radio-button>
			</span>
		</div>
<!-- playground-fold-end -->
		<ui5-table id="table">
			<ui5-table-selection-multi id="selection" slot="features" selected="Row1 Row3"></ui5-table-selection-multi>
<!-- playground-fold -->
			<ui5-table-header-row slot="headerRow">
				<ui5-table-header-cell id="produtCol" width="1fr"><span>Product</span></ui5-table-header-cell>
				<ui5-table-header-cell id="supplierCol" width="1fr">Supplier</ui5-table-header-cell>
				<ui5-table-header-cell id="dimensionsCol" width="1fr">Dimensions</ui5-table-header-cell>
				<ui5-table-header-cell id="weightCol" width="1fr">Weight</ui5-table-header-cell>
				<ui5-table-header-cell id="priceCol" width="1fr" horizontal-align="End">Price</ui5-table-header-cell>
			</ui5-table-header-row>
			<ui5-table-row row-key="Row1">
				<ui5-table-cell><ui5-label><b>Notebook Basic 15</b><br>HT-1000</ui5-label></ui5-table-cell>
				<ui5-table-cell><ui5-label>Very Best Screens</ui5-label></ui5-table-cell>
				<ui5-table-cell><ui5-label>30 x 18 x 3 cm</ui5-label></ui5-table-cell>
				<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>4.2</b> KG</ui5-label></ui5-table-cell>
				<ui5-table-cell><ui5-label><b>956</b> EUR</ui5-label></ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row row-key="Row2">
				<ui5-table-cell><ui5-label><b>Notebook Basic 17</b><br>HT-1001</ui5-label></ui5-table-cell>
				<ui5-table-cell><ui5-label>Smartcards</ui5-label></ui5-table-cell>
				<ui5-table-cell><ui5-label>29 x 17 x 3.1 cm</ui5-label></ui5-table-cell>
				<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>4.5</b> KG</ui5-label></ui5-table-cell>
				<ui5-table-cell><ui5-label><b>1249</b> EUR</ui5-label></ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row row-key="Row3">
				<ui5-table-cell><ui5-label><b>Notebook Basic 18</b><br>HT-1002</ui5-label></ui5-table-cell>
				<ui5-table-cell><ui5-label>Technocom</ui5-label></ui5-table-cell>
				<ui5-table-cell><ui5-label>32 x 21 x 4 cm</ui5-label></ui5-table-cell>
				<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>3.7</b> KG</ui5-label></ui5-table-cell>
				<ui5-table-cell><ui5-label><b>29</b> EUR</ui5-label></ui5-table-cell>
			</ui5-table-row>
<!-- playground-fold-end -->
		</ui5-table>
<!-- playground-fold -->
	</div>
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
